<template>
    <div style="width: 60%; margin: 10px auto">
  
      <div style="display: flex; grid-gap: 20px">
  
        <!-- 聊天组开始 -->
        <div class="chat-card" style="width: 200px; min-height: 600px">
          <div v-if="chatGroupList.length > 0" @click="loadChatList(item.chatUserId)" v-for="item in chatGroupList" :key="item.id">
            <div style="position: relative" v-if="item.userId === user.id" class="chat-group" :class="{'chat-group-active' : item.chatUserId === activeChatUserId}">
              <img :src="item.chatUserAvatar" style="width: 50px; height: 50px; border-radius: 50%" />
              <el-badge :value="item.chatNum" :max="99" v-if="item.chatNum > 0 && !activeChatUserId">
                <span style="color: #333">{{ item.chatUserName }}</span>
              </el-badge>
              <span v-else style="color: #333">{{ item.chatUserName }}</span>
  
              <!-- 每个聊天对象右上角的x号 -->
              <!-- @click.stop="closeGroup(item.id)" 中的stop代表停止传播事件 -->
              <i class="el-icon-close" style="position: absolute; top: 10px; right: 10px" @click.stop="closeGroup(item.id)"></i>
            </div>
          </div>
          <div v-if="chatGroupList.length === 0" style="color: #666; padding: 20px 0; text-align: center">暂无聊天对象..</div>
        </div>
        <!-- 聊天组结束 -->
  
        <!-- 聊天消息开始 -->
        <div class="chat-card" style="flex: 1; height: 600px">
          <div class="chat-text" style="height: 400px; border-bottom: 1px solid #ddd; overflow-y: auto;">
            <div v-for="item in chatList" :key="item.id" style="margin-bottom: 20px">
  
              <!-- 左边的聊天消息开始 -->
              <!-- v-if="item.chatUserId === user.id" 表示当前的登录人是消息的接收方，那么这个消息就是聊天对象发来的，就应该显示在左边-->
              <div v-if="item.chatUserId === user.id" style="display: flex; grid-gap: 10px">
                <img style="width: 50px; height: 50px; border-radius: 5px" :src="item.userAvatar" alt="">
                <div style="max-width: 50%; width: fit-content">
                  <div style="color: #666; margin-bottom: 5px">{{ item.userName }}</div>
                  <div style="background-color: #d1e7ff; padding: 10px; border-radius: 5px;" v-text="item.text"></div>
                </div>
              </div>
              <!-- 左边的聊天消息结束 -->
  
              <!-- 右边的聊天消息开始 -->
              <!-- v-if="item.userId === user.id" 表示当前的登录人就是聊天消息的发送者，那么这个消息就是当前登录人发出的，就应该显示在右边 -->
              <div v-if="item.userId === user.id" style="display: flex; justify-content: right; grid-gap: 10px">
                <div style="max-width: 50%; width: fit-content">
                  <div style="color: #666; margin-bottom: 5px; text-align: right">{{ item.userName }}</div>
                  <div style="background-color: #a3eecb; padding: 10px; border-radius: 5px;" v-text="item.text"></div>
                </div>
                <img style="width: 50px; height: 50px; border-radius: 5px" :src="item.userAvatar" alt="">
              </div>
              <!-- 右边的聊天消息结束 -->
  
            </div>
            <!-- 锚点 -->
            <div style="height: 0"><a id="chat-text-end" name="1" href="#1" style="outline: none">&nbsp</a></div>
          </div>
          <!-- 聊天消息结束 -->
  
          <!-- 聊天输入框开始 -->
          <div style="height: 200px">
            <textarea v-model="form.text" style="height: 160px; width: 100%; padding: 20px; border: none;
               border-bottom: 1px solid #ddd; outline: none"></textarea>
            <div style="text-align: right; padding-right: 10px">
              <el-button type="primary" size="mini" @click="send">发送</el-button>
            </div>
          </div>
          <!-- 聊天输入框结束 -->
  
        </div>
  
      </div>
    </div>
  </template>
  
  <script>
  let socket
  
  export default {
    name: "Chat",
    data() {
      return {
        user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
        chatGroupList: [],
        activeChatUserId: 0,
        sendActive:0,//额外加的聊天激活
        form: {},
        chatList: []
      }
    },
    created() {
      this.init()
      this.loadChatGroup()
    },
    methods: {
      closeGroup(id) {
        this.$request.delete('/chatGroup/delete/' + id).then(res => {
          this.loadChatGroup()
          this.chatList = []  // 清空聊天消息
        })
      },
      // 发送消息
      send() {
        //首先判断有没有选中聊天对象，没选中人的话是不能发送聊天消息的
        if (!this.activeChatUserId) {
          this.$message.warning('请选择聊天对象')
          return
        }
        //判断消息框有没有消息
        if (!this.form.text) {
          this.$message.warning('请输入消息内容')
          return
        }
        this.form.chatUserId = this.activeChatUserId
        this.form.userId = this.user.id
        this.$request.post('/chatInfo/add', this.form).then(res => {
          this.form = {}
          this.loadChatList(this.activeChatUserId)
  
          // 发送socket消息
          /* 客户端发送消息到服务端（如 socket.send()），触发服务端的 @OnMessage 方法。 */
          socket.send('聊天消息')
        })
      },
      loadChatList(chatUserId) {
        this.form = {}
        this.activeChatUserId = chatUserId
        //额外加的聊天激活
        //this.sendActive = chatUserId
  
        // 更新消息读取状态
        this.$request.put('/chatInfo/updateRead/' + chatUserId).then(res => {
  
          this.loadChatGroup()
        })
        // 根据当前用户的聊天人去查询当前的用户和聊天人之间所有的聊天记录
        this.$request.get('/chatInfo/selectUserChat/' + chatUserId).then(res => {
          this.chatList = res.data || []
          // 锚点，设置了以后能够让用户在发消息后及时让滚动条滚动
          document.getElementById('chat-text-end').click()
        })
      },
      //查出
      loadChatGroup() {
        this.$request.get('/chatGroup/selectUserGroup').then(res => {
          this.chatGroupList = res.data || []
          //这个是后面自己额外加的，如果这里activeChatUserId不重置为0，那么当任意一个聊天对象被点击时，其他的未读消息的提示都不会显示出来了
          //this.activeChatUserId=0
        })
      },
      //WebSocket连接（固定的模板）
      init() {
        let _this = this
        if (typeof (WebSocket) == "undefined") {
          console.log("您的浏览器不支持WebSocket")
        } else {
          console.log("您的浏览器支持WebSocket")
          let socketUrl = "ws://localhost:9090/chatServer/" + this.user.id
          if (socket != null) {
            socket.close()
            socket = null
          }
          // 开启一个websocket服务
          socket = new WebSocket(socketUrl)
          //打开事件
          socket.onopen = function () {
            console.log("websocket已打开")
          }
          //  浏览器端收消息，获得从服务端数据库里的最新的聊天消息
          socket.onmessage = function (msg) {
            //接收到消息后重新去加载以下聊天的窗口和聊天的消息
            _this.loadChatGroup()
            _this.loadChatList(_this.activeChatUserId)
          }
          //关闭事件
          socket.onclose = function () {
            console.log("websocket已关闭")
          }
          //发生了错误事件
          socket.onerror = function () {
            console.log("websocket发生了错误")
          }
        }
      }
    }
  }
  </script>
  
  <style scoped>
  .chat-card {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
  }
  /* 聊天组的class */
  .chat-group {
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    grid-gap: 10px;
    border-bottom: 1px solid #ddd
  }
  .chat-group-active {
    background-color: #d1e7ff;
  }
  /* 聊天消息的class */
  .chat-text {
    padding: 20px;
  }
  .chat-text::-webkit-scrollbar {
    width: 10px;
  }
  .chat-text::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #d1e7ff;
  }
  /* 右上角徽章样式 */
  /deep/.el-badge__content.is-fixed {
    right: 2px;
  }
  </style>